<template>
  <view class="de-re-frame">
    <canvas :canvas-id="canvasId" :style="'height:'+cSize+'px;width:'+cSize+'px;'"></canvas>
    <view class="de-re-place" :style="'height:'+cSize+'px;width:'+cSize+'px;'">
      <template v-if="cPlaceContent">
        <view class="de-re-progress de-re-progress_1" v-if="cBili<100">
          <view class="de-re-progress_yi">已抢</view>
          <view class="de-re-progress_zhi">{{cBili}}%</view>
        </view>
        <view class="de-re-progress de-re-progress_2" v-else>已抢光</view>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "GgDrawProgress",
  props: {
    canvasId: {				//画布的id 同个页面需要多个画布需要定义不同id
      type: String,
      default: 'gg-draw-progress-canvas',
    },
    cSize: {			//圆的大小 单位px 取偶数
      type: Number,
      default: 80
    },
    cBackground: {	//进度条背景底色
      type: String,
      default: '#f4f4f4'
    },
    cColor: {	//进度条颜色
      type: String,
      default: '#fe9b25'
    },
    lineWidth: {		//进度条线的宽度   注意：因为圆的半径设置为画布大小的一半-2  所以注意进度条线的粗细会不会超过圆的大小
      type: Number,
      default: 8
    },
    cBili: {			//进度条的占比
      type: [Number, String],
      validator: function (val) {		//验证器
        return val >= 0 && val <= 100
      },
      default: 100
    },
    cPlaceContent: {		//是否显示默认提示内容
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  watch: {
    cBili(val) {		//监听比例数值的改变
      this.drawProgress();
    }
  },
  created() {
    this.drawProgress();
  },
  mounted() {

  },
  methods: {
    drawProgress() {
      let yX = this.cSize / 2;	//圆心 x坐标
      let yY = this.cSize / 2;	//圆心 y坐标
      let yBanJ = this.cSize / 2 - 4;	//圆的半径  减2是因为有线条宽度

      const ctx = uni.createCanvasContext(this.canvasId, this)

      ctx.beginPath();		//画背景
      ctx.arc(yX, yY, yBanJ, 0.7 * Math.PI, 2.3 * Math.PI);//坐标40，40 半径38  
      ctx.setStrokeStyle(this.cBackground);		//画颜色
      ctx.setLineWidth(this.lineWidth);
      ctx.stroke();		//填充 画弧线

      let value = (this.cBili / 100).toFixed(4)
      let bX = 0.70 * Math.PI;		//进度条开始的位置 一直都是0.7
      let eX = (0.70 + (1.6 * value)) * Math.PI;		//进度条结束的位置 100%是2.3
      ctx.beginPath();
      ctx.arc(yX, yY, yBanJ, bX, eX);  //范围是0.7-2.3之间是百分百
      ctx.setStrokeStyle(this.cColor);
      ctx.stroke();

      setTimeout(() => {	//必须延迟执行 不然H5不显示
        ctx.draw();		//画在画布上
      }, 20)

    }
  }
}
</script>

<style>
.de-re-frame {
  position: relative;
}
.de-re-place {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
}
.de-re-progress {
  width: 100%;
  height: 100%;
  display: flex;
}
.de-re-progress_1 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.de-re-progress_2 {
  justify-content: center;
  align-items: center;
  color: #959595;
  font-size: 12px;
}
.de-re-progress_yi {
  color: #959595;
  font-size: 14px;
}
.de-re-progress_zhi {
  color: #181818;
  font-size: 14px;
}
</style>
